<template>
  <div class="wrapper">
    <!-- 普通文件上传（有文件列表） -->
    <!-- <div style="color: red;">
      <span>请忽略这两行，调试使用</span><br />
      <span>当前文件个数：{{uploadLists.length}} 总数限制：{{count}} 是否限制一个：{{isLimit}} 显示上传按钮：{{isClose && uploadLists.length < count}} 类型：{{uploadType}}</span>
    </div> -->
    <a-row
      v-if="uploadType == 'list'"
      type="flex"
      align="middle"
    >
      <div class="uploadWrap">
        <div
          v-for="(item, index) in uploadLists"
          :key="index"
          class="uploadName"
        >
          <a
            v-if="!checkVisibleInDetail"
            @click="handleExportLimit"
          >{{ item.fileName }}</a>
          <!-- pc端 -->
          <a-popover
            v-else
            :key="item.fileId"
            placement="top"
          >
            <template slot="content">
              <a
                :fileId="item.fileId"
                :fileName="item.fileName"
                :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
                target="_parent"
              >下载</a>
              <a-divider type="vertical" />
              <a
                :key="item.fileId"
                @click="$filePreview(item)"
              >查看</a>
            </template>
            <a-button
              size="small"
              type="link"
            >
              {{ item.fileName }}
            </a-button>
          </a-popover>
          <a-icon
            v-if="isClose && (!disabled) && !item.isHidden"
            style="cursor: pointer; margin-left: 6px"
            :type="spinning && fileAutoLoading ? 'loading' : 'close'"
            @click="deleteFiles(item)"
          />
        </div>
      </div>
      <a-upload
        v-if="isClose && uploadLists.length < count"
        v-bind="$attrs"
        :accept="useAccept ? accept : accept + defaultAccept"
        name="file"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :disabled="disabled || spinning"
        :multiple="multiple"
        v-on="$listeners"
        @change="handleChanges"
      >
        <a-button
          v-if="isShow"
          :loading="spinning"
        >
          <a-icon
            :type="spinning ? 'loading' : 'upload'"
            style="color: #1890ff"
          />
          {{ text }}{{ uploadProgressPercent || '' }}
        </a-button>
      </a-upload>
    </a-row>
    <!-- 普通文件上传 -->
    <template v-if="uploadType == 'normal'">
      <a-upload
        v-bind="$attrs"
        :accept="useAccept ? accept : accept + defaultAccept"
        name="file"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        :disabled="disabled || spinning"
        :multiple="multiple"
        v-on="$listeners"
        @change="handleChanges"
      >
        <slot v-if="customBtn" />
        <a-button
          v-else
          :loading="spinning"
          :type="btnType"
        >
          <a-icon
            :type="spinning ? 'loading' : 'upload'"
            :style="btnType == 'primary' ? 'color: #FFF' : 'color: #1890ff'"
          />
          {{ text }}{{ uploadProgressPercent || '' }}
        </a-button>
      </a-upload>
    </template>
    <!-- 图片上传 -->
    <template v-if="uploadType == 'image' || uploadType == 'uploadImgAndVideo'" >
      <div class="clearfix" :class="isUploadImgAndVideo? 'UploadImgVideo':''">
        <a-upload
          v-bind="$attrs"
          :disabled="editModel == 0 || disabled || spinning"
          :accept="useAccept ? accept : accept + '.jpg, .jpeg, .gif, .png'"
          list-type="picture-card"
          name="file"
          :file-list="uploadLists"
          :before-upload="beforeUpload"
          :remove="deleteFiles"
          :show-upload-list="showUploadList"
          :multiple="multiple"
          v-on="$listeners"
          @preview="handlePreview"
          @change="handleChanges"
        >
          <!-- 上传标识 -->
          <div class="video" v-if="uploadLists.length < count && editModel != 0 && !disabled&&showUploadBtn">
            <a-icon :type="spinning ? 'loading' : 'plus'" />
          </div>
        </a-upload>
         <div v-if="isUploadImgAndVideo"  class="uploadImgVideo-list">

           <div class="list"  v-for="(item,index) in uploadLists" :key="index">
              <img  v-if="!item.sTypeVideo" :src="fileLink(item)"/>
              <video  v-else controls  :src="$fileUrl(item)" width="100%" height="100%"/>
              <div class="hover">
                <a-icon @click="handlePreview(item)" type="eye" />
                <a-icon v-if="isUploadImgAndVideoLog&&delFile=='all'" @click="deleteFiles(item)"
                        type="delete"
                        style="margin-left:16px"/>
                <a-icon v-else-if="isUploadImgAndVideoLog && uploadLists.length > delFile" @click="deleteFiles(item, index)"
                        type="delete"
                        style="margin-left:16px"/>
              </div>
           </div>
        </div>
         <!-- 图片预览 -->
          <pre-view v-if="!isVideo"
            :preview-image="previewImage"
            :visible.sync="previewVisible"
          />
        <a-modal :width="900" v-else :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
          <video controls :src="previewImage" style="width:100%;height:500px"></video>
        </a-modal>
      </div>
    </template>
  </div>
</template>

<script>
import { checkVisibleInDetail } from '@/utils/util'
import Vue from 'vue'
import { uploadFile, deleteFile } from '@/api'
import PreView from '@/components/PreView' // 图片预览
import debounce from 'lodash/debounce'
const columnAssment = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: '10%',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '附件名称',
    dataIndex: 'fileName',
    width: '15%'
  },
  {
    title: '附件格式',
    dataIndex: 'suffixName',
    width: '15%'
  },
  {
    title: '附件地址',
    dataIndex: 'rootPath',
    width: '40%'
  },
  {
    title: '操作',
    key: 'action',
    width: '20%',
    scopedSlots: { customRender: 'action' }
  }
]

// 转化base64
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}

/*
* 使用文档
* 作为图片上传时：
* 需要设置:uploadArrys.sync="formData.fileList" ，不需要设置@fileArrysData="fileArrysData"，就目前debug情况来看，会报错
* uploadArrys.sync返回的是下面这个类型的数组。需要自行处理
* {
    alias: "C53B703193D3B482CD49098E8DDD985A.png",
    commonId: "641190568063537152",
    createPerson: "5e3a42971f9a4eb1ad74791d9dd7c4ed",
    createTime: "2020-11-04",
    fileDesc: null,
    fileId: "C53B703193D3B482CD49098E8DDD985A",
    fileName: "pin",
    fileSize: "9185",
    fileType: "image/png",
    formDesc: null,
    id: "3dc42ed381b64c8b98ca5b09962cfa70",
    originalFileName: null,
    relaPath: "5e3a42971f9a4eb1ad74791d9dd7c4ed//material/13//3dc42ed381b64c8b98ca5b09962cfa70",
    rootPath: "/home/ycloud-platform/fileCenter/",
    suffixName: ".png",
    updatePerson: "5e3a42971f9a4eb1ad74791d9dd7c4ed",
    updateTime: "2020-11-04",
    url: null
}
*    <l-table :disabled="!editable"
             :uploadArrys.sync="formData.fileList"
             businessCode="MM16"
             uploadType='image'
             count="12"
             editModel="2">
    </l-table>
* */

export default {
  name: 'UploadList',
  inheritAttrs: false,
  components: {
    PreView
  },
  props: {
    // 是否服务器删除
    serviceDel: {
      type: Boolean,
      default: true
    },
    // 可删除数量
    delFile: {
      type: [String, Number],
      default: 'all'
    },
    // 某些页面不需要展示上传按钮 只允许删除 配合 delFile 使用
    showUploadBtn: {
      type: Boolean,
      default: true
    },
    // 文件类型
    uploadType: {
      type: String,
      default() {
        return 'list'
      }
    },
    // 是否显示删除图标和上传按钮
    showUpload: {
      type: Boolean,
      default: () => true
    },
    btnType: {
      type: String,
      default() {
        return 'upload'
      }
    },
    // 上传按钮名称
    text: {
      type: String,
      default() {
        return '上传文件'
      }
    },
    // 可上传数量
    count: {
      type: [String, Number],
      default() {
        return 100
      }
    },
    // 图片文件类型
    accept: {
      type: String,
      default() {
        return ''
      }
    },
    // 是否仅使用自定义accept
    useAccept: {
      type: Boolean,
      default: false
    },
    // 上传图片操作模式 0 查看；1 编辑；2 添加
    editModel: {
      type: [String, Number],
      default() {
        return '0'
      }
    },
    // 是否禁止编辑
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 业务编码
    businessCode: {
      type: String,
      value: ''
    },
    listUpload: {
      type: String,
      value: ''
    },
    businessId: {
      type: String,
      value: ''
    },
    uploadList: {
      type: String,
      value: ''
    },
    // 文件列表
    uploadArrys: {
      type: Array,
      default: () => [
        //图片传这个格式
        // { fileId: '4C7C6900BE35793498AA190C42F44EDD', fileName: '', id: '' }
        //文件列表传这个格式
        // {
        //     alias: "C53B703193D3B482CD49098E8DDD985A.png",
        //     commonId: "641190568063537152",
        //     createPerson: "5e3a42971f9a4eb1ad74791d9dd7c4ed",
        //     createTime: "2020-11-04",
        //     fileDesc: null,
        //     fileId: "C53B703193D3B482CD49098E8DDD985A",
        //     fileName: "pin",
        //     fileSize: "9185",
        //     fileType: "image/png",
        //     formDesc: null,
        //     id: "3dc42ed381b64c8b98ca5b09962cfa70",
        //     originalFileName: null,
        //     relaPath: "5e3a42971f9a4eb1ad74791d9dd7c4ed//material/13//3dc42ed381b64c8b98ca5b09962cfa70",
        //     rootPath: "/home/ycloud-platform/fileCenter/",
        //     suffixName: ".png",
        //     updatePerson: "5e3a42971f9a4eb1ad74791d9dd7c4ed",
        //     updateTime: "2020-11-04",
        //     url: null
        // }
      ]
    },
    // 是否自定义按钮
    customBtn: {
      type: Boolean,
      default: () => false
    },
    // 是否显示删除图标和上传按钮
    isClose: {
      type: Boolean,
      default: () => true
    },
    // 限制是否只上传一个文件
    isLimit: {
      type: Boolean,
      default: () => false
    },
    // 自定义错误提示
    errorTips: {
      type: String,
      default: ''
    },
    // 是否显示上传按钮
    isShow: {
      type: Boolean,
      default: () => true
    },
    // 是否调用删除接口
    delRequest: {
      type: Boolean,
      default: () => true
    },
    // 默认多选开启
    multiple: {
      type: Boolean,
      default: () => true
    },
    // 兼容多选时返回的fileList只能给一条数据加commonId和fileId问题
    isMultiple: {
      type: Boolean,
      default: () => false
    },
    // 上传或删除操作时，已上传文件是否自动显示Loading效果
    fileAutoLoading: {
      type: Boolean,
      default: true
    },
    // 是否展示上传列表（图片类型）
    showUploadList: {
      type: [Boolean, Object],
      default: true
    },
    // 是否同步图片的删除
    isImgRemove: {
      type: Boolean,
      default: false
    },
    // 是否必须上传中文名字
    needChineseName: {
      type: Boolean,
      default: false
    },
    // 是否替换
    isReplace: {
      type: Boolean,
      default: false
    },
    //是不是图片视频混传
    isUploadImgAndVideo:{
      type: Boolean,
      default: false
    },
    //是不是图片视频混传查看
    isUploadImgAndVideoLog:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkVisibleInDetail: checkVisibleInDetail(this),
      columnAssment,
      spinning: false,
      uploadFile: {},
      uploadLists: [],
      deleteObj: {},
      token: '',
      previewVisible: false, // 预览控件
      previewImage: '', // 预览图
      uploadProgressPercent: '',
      // 一次最多10个
      num: 10,
      defaultAccept:
        '.ceb,.ppt,.jpeg,.pptx,.xls,.xlsx,.doc,.docx,.vsd,.vsdx,.mpp,.mpt,.mov,.csv,.rtf,.wps,.et,.dps,.rar,.zip,.tar,.gz,.7z,.bz2,.bmp,.png,.jpg,.ico,.gif,.tif,.avi,.wav,.wmv,.rmvb,.mp3,.mp4,.chm,.txt,.zpet,.html,.pdf,.RAR',
      files: [],
      isVideo:false,
      isTypeVideoArr:['.mp4','.MP4','.RM','.rmvb','.3gp','.avi','.flv','.f4v','.mpg','.vob','.dat','.wmv','.asf','.mkv','.dv','.mov','.ts','.webm','.MOV','.MPV','.3GP'], //支持的视频格式

      
    }
  },
  created() {
    // console.log(this.uploadType)
    this.token = Vue.getAcloudProvider().getAccessToken()
    this.initUploadList()
  },
  computed: {
    imgList: {
      get: function () {
        return this.uploadArrys
      },
      set: function (val) {
        this.$emit('update:uploadArrys', val)
      }
    }
  },
  watch: {
    uploadArrys(val) {
      this.initUploadList()
    }
  },
  methods: {
    handleExportLimit() {
      this.$message.warning('抱歉，app端无法导出，请在系统电脑端进行导出')
    },
    fileLink(file){     //文件链接
     let link = '/api/ycloud-file-center/oper/download?access_token=' + this.token + '&fileId=' + file.fileId || file.preview;
     return link;
    },
    initUploadList() {
      if (this.uploadArrys && this.uploadArrys.length != 0) {
        // console.log(this.uploadArrys)
        this.uploadLists =
          this.uploadType == 'image' ||  this.uploadType == 'uploadImgAndVideo'
            ? this.uploadArrys?.map((item) => {
                const { id, fileName, fileId, suffixName } = item
                let sTypeVideo = this.isTypeVideoArr.includes(suffixName); //判断是不是视频文件
                if (id) {
                  return {
                    ...item,
                    name: sTypeVideo?"视频文件，请点击预览":fileName + suffixName || id,
                    uid: id,
                    url: '/api/ycloud-file-center/oper/download?access_token=' + this.token + '&fileId=' + fileId,
                    sTypeVideo
                  }
                }
                return item
              })
            : this.uploadArrys || []
      } else {
        this.uploadLists = this.uploadArrys || []
      
      }
    },
    /**
     * @description: 500M提示
     * @param {void}
     * @return {function}
     */
    sizeDebounce: debounce(function () {
      this.$message.error('上传文件不可超出500M')
    }, 500),
    /**
     * @description: 必须图片提示
     * @param {void}
     * @return {function}
     */
    imgDebounce: debounce(function () {
      this.$message.error('只能上传图片文件！')
    }, 500),
    /**
     * @description: 附件名弹窗提示
     * @param {void}
     * @return {function}
     */
    nameDebounce: debounce(function () {
      this.$confirm({
        title: '提示',
        content: this.errorTips ? this.errorTips : '请规范附件名称，附件名称中需含有汉字',
        okType: 'danger'
      })
    }, 500),
    beforeUpload(info, fileList) {
      // this.uploadFile = info
      return false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
        this.previewImage = '/api/ycloud-file-center/oper/download?access_token=' + this.token + '&fileId=' + file.fileId || file.preview
        this.previewVisible = true
        let fileType = file.fileType?.split('/')[0] === 'video'; //视频预览
        if(fileType){
            this.isVideo = true;
            console.log( this.previewImage)
          }else{
            this.isVideo = false;
          } 
    },

    /**
     * @description: 文件上传防抖
     * @param {function}
     * @return {void}
     */
    fileChange: debounce(function () {
      this.handleUploadFun()
    }, 500),
    /**
     * @description: 接管文件上传
     * @param {object} info 文件对象
     * @return {void}
     */
    handleChanges(info) {
      // 获取文件后缀名称
      const extension = info.file.name.substring(info.file.name.lastIndexOf('.'))
      console.log(extension, 'extension')
      if(this.useAccept) {
        if(this.accept&&this.accept.indexOf(extension) === -1) {
          this.$message.warning('请上传正确的文件')
          return false
        }
      }
      // 图片删除直接返回并从列表中删除当前文件
      if (this.uploadType == 'image' && this.files.length + this.uploadLists.length > info.fileList.length) {
        this.uploadLists = this.uploadLists.filter((el) => el.id !== info.file.id)
        return
      }
      let pass = true
      const { file } = info
      const isImg = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'video/mp4' || file.type === 'video/avi'
      if (file.size / 1024 / 1024 > 500) {
        // 附件大小校验
        // 限制文件大小为500M
        this.sizeDebounce()
        pass = false
      }
      if (this.uploadType == 'image' && !isImg) {
        // 图片附件类型校验
        this.imgDebounce()
        pass = false
      }
      if (this.needChineseName) {
        // 附件名称需要汉字校验
        let re = new RegExp('[\u4E00-\\u9FFF]+', 'g')
        if (!re.test(file.name)) {
          this.nameDebounce()
          pass = false
        }
      }
      if (pass) {
        this.files.push(file)
        this.fileChange()
      }
      // if (!this.uploadFile) return
      // // if (this.isMultiple) this.uploadLists = info.fileList
      // // 多文件上传限制单次this.num个总数this.count个
      // if (this.multiple) {
      //   const is = info.fileList.length < this.num && info.fileList.length < this.count
      //   // 单次
      //   if (info.fileList.length > this.num) {
      //     this.numMesgDebounce()
      //     info.fileList = info.fileList.slice(0, this.num > this.count ? this.count : this.num)
      //   }
      //   if (info.fileList.length + this.uploadLists.length > this.count) {
      //     this.countMesgDebounce()
      //     info.fileList = info.fileList.slice(0, this.num > this.count ? this.count : this.num)
      //   }
      //   const index = info.fileList.findIndex((el) => el.uid === info.file.uid)
      //   // 上传个数需要小于一次this.num个，并且已上传+这次上传小于总数this.count
      //   if (index < this.num && index >= 0 && (is ? this.uploadLists.length + index : index) < this.count) {
      //     this.uploadFun(info)
      //   }
      // } else {
      //   if (this.uploadLists.length < this.count) {
      //     this.uploadFun(info)
      //   }
      // }
    },
    /**
     * @description: 判断及操作上传文件队列
     * @return {void}
     */
    async handleUploadFun() {
      let pass = true
      // isLimit = ture 限制取第一个作为上传的 文件
      if (this.isLimit && this.uploadLists.length + this.files.length >= 2) {
        pass = false
        this.$message.error('只能上传一个附件！')
        this.files = [this.files.shift()]
      }
      if (pass && this.uploadLists.length + this.files.length > this.count) {
        pass = false
        this.$message.error(`最多上传${this.count}个文件！`)
        this.files = this.files.slice(0, this.count - this.uploadLists.length)
      }
      if (this.multiple) {
        if (pass && this.files.length > this.num) {
          this.$message.error(`一次最多上传${this.num}个文件！`)
          this.files = this.files.slice(0, this.num)
        }
      }

      this.spinning = true
      // 防止上传错误一直loading
      try {
        for (let i = 0; i < this.files.length; i++) {
          await this.uploadFun(this.files[i])
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.files = []
        this.spinning = false
        this.$emit('update:uploadArrys', this.uploadLists)
        this.$emit('fileArrysData', this.uploadLists)
        if (this.isReplace) {
          this.uploadLists = []
        }
      }
    },
    /**
     * @description: 上传函数拆分
     * @param {FormData} data
     * @return {void}
     */
    uploadFun(info) {
      return new Promise(async (resolve, reject) => {
        const data = new FormData()
        data.append('file', info)
        data.append('businessCode', this.businessCode)
        // this.spinning = true
        uploadFile(data, {
          onUploadProgress: (e) => {
            this.uploadProgressPercent = `${((e.loaded / e.total) * 100).toFixed(0)}%` // 计算上传进度
          }
        })
          .then((res) => {
            // this.spinning = false
            if (res.code === 200) {
              if (this.uploadType == 'image' || this.uploadType == 'uploadImgAndVideo' ) {
                // info.file.commonId = res.data.commonId
                let datas = res.data
                datas.name = datas.fileName + datas.suffixName
                datas.url = '/api/ycloud-file-center/oper/download?access_token=' + this.token + '&fileId=' + datas.fileId
                datas.uid = datas.id
                // console.log(this.isMultiple)
                // if (this.isMultiple) {
                this.uploadLists.forEach((item, index) => {
                  if (item.name == res.data.fileName + res.data.suffixName && !item.commonId) {
                    // console.log(res.data, item)
                    item.commonId = res.data.commonId
                    item.fileId = res.data.fileId
                  }
                })
                // } else {
                //   console.log(info)
                //   this.uploadLists = info.fileList.map((item) => {
                //     if (item.name == res.data.fileName + res.data.suffixName && !item.commonId) {
                //       item.commonId = res.data.commonId
                //       item.fileId = res.data.fileId
                //     }
                //     return item
                //   })
                // }
                if (this.imgList != null) {
                  this.imgList.push(datas)
                } else {
                  this.imgList = [datas]
                }
              } else {
                this.uploadLists.push(res.data)
              }
              // let ids = []
              // this.uploadLists.forEach(function(obj,i) {
              //   ids.push(obj.commonId)
              // })
              // this.$emit('update:uploadArrys', this.uploadLists)
              // this.$emit('fileArrysData', this.uploadLists)
              if (this.isLimit && this.uploadLists.length == 1) {
                this.isShow = false
              }
              // if(this.uploadList != ""){
              //   let data = {businessId:this.businessId,commonFileId:this.uploadLists,businessCode:this.businessCode}
              //   this.$axios.post(this.uploadList,data).then(res=>{
              //     console.log("无业务id附件上传成功！")
              //   })
              // }
            } else {
              this.$message.warning('上传失败')
              // info.fileList.splice(
              //   info.fileList.findIndex((el) => el.uid === info.file.uid),
              //   1
              // )
            }
            this.uploadProgressPercent = '' // 置空进度
            resolve()
          })
          .catch((error) => {
            console.log(error)
            this.$message.warning('上传失败')
            this.uploadProgressPercent = '' // 置空进度
            // this.spinning = false
            // info.fileList.splice(
            //   info.fileList.findIndex((el) => el.uid === info.file.uid),
            //   1
            // )
            reject(error)
          })
      })
    },
    // 删除文件
    deleteFiles(record, index) {
      // 本地删除 需要的自己定制化开发
      if(!this.serviceDel) {
        if (this.uploadType == 'image') {
          this.imgList.splice(index, 1)
        }
        return
      }
      if (this.spinning) return
      let arr = []
      // console.log(record)
      let commonId = record.originFileObj && record.originFileObj.commonId ? record.originFileObj.commonId : record.commonId
      arr.push(commonId)
      // 是否调用删除接口
      if (this.delRequest) {
        this.spinning = true
        deleteFile(arr)
          .then((res) => {
            this.spinning = false
            if (res.data.code == 200) {
              if (this.uploadType == 'image') {
                this.imgList.forEach((obj, i) => {
                  // console.log(obj.commonId, commonId)
                  if (obj.commonId == commonId) {
                    this.imgList.splice(i, 1)
                  }
                })
              } else {
                this.uploadLists.forEach((obj, i) => {
                  // console.log(obj, commonId)
                  if (obj.commonId == commonId) {
                    this.uploadLists.splice(i, 1)
                  }
                })
              }
              if (this.isLimit && this.uploadLists.length == 0) {
                this.isShow = true
              }
              this.$emit('fileArrysData', this.uploadLists)
              this.$emit('update:uploadArrys', this.uploadLists)
              // 解决 image 模式情况下，数据删除无效的问题
              if (this.isImgRemove) {
                this.$emit('update:uploadArrys', this.imgList)
              }
              this.uploadProgressPercent = '' // 置空进度
            } else {
              this.$message.warning('删除失败')
            }
          })
          .catch((res) => {
            this.spinning = false
            this.$message.warning('删除失败')
          })
      } else {
        if (this.uploadType == 'image') {
          this.imgList.forEach((obj, i) => {
            console.log(obj.commonId, commonId)
            if (obj.commonId == commonId) {
              this.imgList.splice(i, 1)
            }
          })
        } else {
          this.uploadLists.forEach((obj, i) => {
            // console.log(obj, commonId)
            if (obj.commonId == commonId) {
              this.uploadLists.splice(i, 1)
            }
          })
          this.$emit('update:uploadArrys', this.uploadLists)
        }
        if (this.isLimit && this.uploadLists.length == 0) {
          this.isShow = true
        }
        this.$emit('fileArrysData', this.uploadLists)
        this.uploadProgressPercent = '' // 置空进度
      }
    }
  }
}
</script>

<style scoped lang="less">
@deep: ~'>>>';
/* .wrapper {
  overflow: hidden;
} */

.uploadName {
  float: left;
  margin-right: 20px;
  @{deep} .ant-btn{
    span{
      display: block;
      max-width: 300px;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
    }
  }
}
.uploadWrap {
  float: left;
  .uploadName:nth-last-child(1) {
    margin-right: 0
  }
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

/*
上传按钮禁用时css
*/
.ant-upload-disabled button {
  cursor: not-allowed;
  color: #d9d9d9;
}

.ant-upload-disabled button:hover {
  border-color: #d9d9d9;
  color: #d9d9d9;
}

.ant-upload-disabled button:active {
  border-color: #d9d9d9;
  color: #d9d9d9;
}
.wrapper{
  @{deep} .ant-upload-list-picture-card .ant-upload-list-item-thumbnail{
    font-size: 12px;
    line-height: 24px;
  }
  .UploadImgVideo{
      display: flex;
      flex-flow: row wrap;
    @{deep} .ant-upload-list-picture-card-container{
      display: none;
    }
    .ant-upload-picture-card-wrapper{
      width: auto;
      order: 1;
    }
    .video{
       order: 2;
    }
    .uploadImgVideo-list{
       .list{
         position: relative;
          float: left;
          width: 104px;
          height: 104px;
          margin: 0 8px 8px 0;
          border: 1px solid #f5f5f5;
          cursor: pointer;
          padding: 8px;
          img{
            width:100%;
            height:100%;
            object-fit: cover;
          }
          .hover{
            display: none;
          }
          &:hover{
            .hover{
              position: absolute;
              left: 8px;
              top: 8px;
              z-index: 100;
              display: block;
              background-color: #000;
              opacity: 0.7;
              width: calc(100% - 16px);
              height: calc(100% - 16px);
              color: #fff;
              line-height: 88px;
              text-align:center;
            }
          }
       }
    }
  }
}
</style>
